<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Fund </title>
    <script src="../../js/polyfill.min.js"></script>
    <script src="../../js/babel.min.js"></script>
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
    <script src="../../js/vue-local.js"></script>
    <script src="../../layui/layui.js"></script>
    <script src="../../js/axios.min.js"></script>
    <script src="../../js/echarts.js"></script>
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jquery.nicescroll.min.js"></script>
    <link rel="stylesheet" href="../../css/page/fund.css">
    <style>
        .layui-table-body {
            scrollbar-width: none;
        }

        .layui-table-body::-webkit-scrollbar {
            width: 1px;
            height: 1px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="layui-row layui-col-space20">
            <div class="col layui-col-md7">
                <div class="layui-row">
                    <div class="left-wrapper" id="left-chart"></div>
                </div>
            </div>
            <div class="col layui-col-md5">
                <div class="layui-row right-top-wrapper">
                    <table lay-filter="origin">
                        <thead>
                            <tr>
                                <th lay-data="{field:'Time'}">Time</th>
                                <th lay-data="{field:'Revenue'}">Revenue</th>
                                <th lay-data="{field:'expenditure'}">expenditure</th>
                                <th lay-data="{field:'profit'}">profit</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(info,index) in fundInfo">
                                <td>{{info.year}}</td>
                                <td>{{info.revenue}}</td>
                                <td>{{-info.expenditure}}</td>
                                <td>{{info.profit}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="layui-row right-bottom-wrapper">3</div>
            </div>
        </div>
    </div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data() {
            return {
                timeLineArr: [],
                revenueArr: [],
                expenditureArr: [],
                profitArr: [],
                fundInfo: null
            }
        },
        watch: {

        },
        methods: {

        },
        mounted() {
            axios.post('http://127.0.0.1:8080/fundInfo', { planetName: localStorage.getItem("currentPlanet") }).then((res) => {
                this.fundInfo = [...res.data.planetInfo]
                console.log(res.data.planetInfo)
                for (let i = 0; i < this.fundInfo.length; i++) {
                    this.timeLineArr.push(this.fundInfo[i].year)
                    this.revenueArr.push(this.fundInfo[i].revenue)
                    this.expenditureArr.push(this.fundInfo[i].expenditure)
                    this.profitArr.push(this.fundInfo[i].profit)
                }
                return 'ok'
            }).catch((err) => {
                console.log(err);
            }).then(() => {
                let colorArr = ['#f0f8ff', '#78F9FD']
                let option = {
                    dataZoom: [
                        {
                            type: 'slider',
                            show: true,
                            yAxisIndex: [0],
                            left: '93%',
                            width: '10',
                            minSpan: '10',
                            maxSpan: '10',
                            textStyle: {
                                color: "#ffffff"
                            },
                            start: 90,
                            end: 100
                        },
                        {
                            type: 'inside',
                            show: true,
                            yAxisIndex: [0],
                            left: '93%',
                            start: 90,
                            end: 100
                        },
                    ],
                    color: ['#ffb800', '#2071cc', '#9b2f2f'],
                    title: {
                        text: "Revenue Each Year",
                        x: "left",
                        textStyle: {
                            color: colorArr[0],
                            fontSize: '30',
                            fontFamily: 'Courier New, Courier, monospace'
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        data: ['profit', 'expenditure', 'revenue'],
                        right: '10',
                        top: '10',
                        textStyle: {
                            color: colorArr[0],
                            fontFamily: 'Courier New, Courier, monospace'
                        }
                    },
                    xAxis: [
                        {
                            type: 'value',
                            axisTick: { show: false },
                            axisLabel: {
                                textStyle: {
                                    color: colorArr[0],
                                    fontFamily: 'Courier New, Courier, monospace'
                                }
                            },
                            axisLine: {
                                lineStyle: {
                                    color: colorArr[0]
                                }
                            },
                            splitLine: {
                                lineStyle: {
                                    color: colorArr[0]
                                },
                                show: true
                            },
                        },
                    ],
                    yAxis: [
                        {
                            type: 'category',
                            axisTick: { show: false },
                            axisLine: {
                                show: false,
                                lineStyle: {
                                    color: colorArr[0]
                                }
                            },
                            axisLabel: {
                                textStyle: {
                                    color: colorArr[0],
                                    fontFamily: 'Courier New, Courier, monospace'
                                }
                            },
                            splitLine: {
                                show: false
                            },
                            data: this.timeLineArr
                        }
                    ],
                    series: [
                        {
                            name: 'profit',
                            type: 'bar',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'inside',
                                    textStyle: {
                                        color: colorArr[0],
                                        fontFamily: 'Courier New, Courier, monospace'
                                    }
                                }
                            },
                            data: this.profitArr
                        },
                        {
                            name: 'expenditure',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'left',
                                    textStyle: {
                                        color: colorArr[0],
                                        fontFamily: 'Courier New, Courier, monospace'
                                    }
                                }
                            },
                            data: this.expenditureArr
                        },
                        {
                            name: 'revenue',
                            type: 'bar',
                            stack: 'total',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'right',
                                    textStyle: {
                                        color: colorArr[0],
                                        fontFamily: 'Courier New, Courier, monospace'
                                    }
                                }
                            },
                            data: this.revenueArr
                        },
                    ]
                };

                // 基于准备好的dom，初始化echarts实例
                let myChart = echarts.init(document.getElementById('left-chart'));

                myChart.setOption(option);

                // 图标响应式
                window.onresize = () => {
                    myChart.resize()
                };
                layui.use(['jquery', 'table'], function () {
                    var table = layui.table
                    // 生成表格
                    table.init('origin', {
                        height: 315, //设置高度
                        limit: 30
                    });
                    $('.layui-table-body').niceScroll()
                })

            })

        }
    })

</script>

</html>